<template>
  <div>
    <!-- <p>username is {{ user.username }}</p>
    <p>password is {{ user.password }}</p> -->
    <p>username is {{ username }}</p>
    <p>password is {{ password }}</p>
    <button @click="change">change</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
const user = reactive({ username: 'admin', password: 123 })

// 如果啥都不处理，那么解构之后，就失去了响应式
// const { username, password } = user

// 如果你既想解构，同时也想保留响应式，那么就要使用 toRefs 函数
const { username, password } = toRefs(user)

const change = () => {
  user.username = 'zhangsan'
  user.password = '456'
}
</script>
